<!-- 收款 -->
<template>
	<view class="content">
		<view class="newone">
			<view class="nleft" :class="type=='money'?'nactive':''" @click="gethead('money')">易货额</view>
			<view class="nleft"  :class="type=='price'?'nactive':''" @click="gethead('price')">现金</view>
		</view>
		<view class="yitwo">
			<view class="hone">
				<!-- <image class="tivimg" src="/static/images/cuowu.png" mode="" /> -->
				<text class="yiname">{{info.title}}</text>
			</view>
			<view class="htwo">
				<view class="hitem">
					<text class="zname">{{info.shop.name}}</text>
				</view>
				<view class="hitem">
					<text class="zname">{{info.shop.address}}</text>
				</view>
				<view class="hitem">
					<text class="zname">{{info.shop.mobile}}</text>
				</view>
				<image class="maimg" :src="info.qrcode" mode="widthFix" />
				<!-- <view class="huan">
					<text>欢迎使用现金支付</text>
				</view> -->
			</view>
			
		</view>
		<view class="baocun" @click="baocun">保存到相册</view>

		
	</view>
</template>

<script>
	import { mapState, mapActions, mapGetters } from 'vuex';
	export default {
		components: {},
		data() {
			return {
				type:'money',
				info:{
					shop:{
						name:"",
						address:'',
						mobile:''
					}
				},
				url:'',
				zhipop:true,
			};
		},
		computed: {
		},
		onShow() {
		},
		onLoad(){
			this.getWalletLog()
		},
		// 触底加载更多
		onReachBottom() {
		},
		methods: {
			getWalletLog() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('home.getShoukuan', {
					type: this.type,
				}).then(res => {
					if (res.code === 1) {
						this.info = res.data
						// //后端获取到的数据
						// let base64Str = res.data.qrcode;
						// // 如果是base64，可直接使用
						// this.url = 'data:' + base64Str;
						// let base64Data = ''
						// // 通过微信小程序自带方法将base64转为二进制去除特殊符号，再转回base64
						// base64Data = uni.arrayBufferToBase64(uni.base64ToArrayBuffer(base64Str));
						// console.log(base64Data)
						// this.url = 'data:' + base64Data;
						// console.log(this.url)
					}
				});
			},
			gethead(e){
				this.type = e
				this.getWalletLog()
			},
			baocun() {
				//保存相册
				// #ifndef H5
				this.loadBase64Url()
				// #endif
				// #ifdef H5
				uni.showToast({
					title: '请截图保存相册',
					icon: 'none',
					duration: 1000
				});
				// #endif
				},
				loadBase64Url() {
					this.saveImage(this.info.qrcode)
				},
				// 保存图片到手机相册
				saveImage(filePath) {
					let that = this
					// uni.saveImageToPhotosAlbum({
					// 	filePath, // 需要临时文件路径，base64无法保存
					// 	success: () => {
					// 	uni.showToast({
					// 		title: '保存图片成功',
					// 		icon: 'none',
					// 		duration: 1000
					// 	});
					// 	},
					// 	fail: () => {
					// 	uni.showToast({
					// 		title: '保存失败，请重试',
					// 		icon: 'none',
					// 		duration: 1000
					// 	});
					// 	}
					// });
					console.log(filePath)
					uni.downloadFile({
						url: filePath, //图片地址
						success: function(res) {
							const tempFilePath = res.tempFilePath
							uni.saveImageToPhotosAlbum({
								filePath: tempFilePath,
								success: function() {
									// 保存成功
										uni.showToast({
										title: '保存图片成功',
										icon: 'none',
										duration: 1000
									});
								},
								fail: function(err) {
									// 保存失败
								}
							})
						},
						fail: function(err){
							console.log(err)
						}
					})

				},
		}
	};
</script>

<style lang="scss">
	// 钱包记录
	.content {
	   background-color: rgba(246,246,246,1);
	   min-height: 100vh;
	   padding-bottom: 100rpx;
	   .newone{
		width: 70%;
		margin: 60rpx auto 0;
		height: 88rpx;
		border-radius: 50rpx;
		background-color: rgba(230,240,254,1);
		display: flex;
		flex-direction: row;
		position: relative;
		z-index: 10;
		.nleft{
			// background-color: rgba(230,240,254,1);
			width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: rgba(13,75,276,1);
			font-size: 28rpx;
			font-weight: 400;
		}
		.nactive{
			background-color: rgba(11,80,242,1);
			color: #fff;
			border-radius: 50rpx;
		}
	   }
	   .yitwo{
		 background-color: #fff;
		 border-radius: 20rpx;
		 margin: -44rpx 30rpx 30rpx;
		 position: relative;
		//  height: 400rpx;
		 padding: 80rpx 0rpx 0;
		 .hone{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			.yiname{
				color: #333;
				font-size: 30rpx;
				font-weight: 400;
			}
			.tivimg{
				width: 70rpx;
				height: 70rpx;
				margin-right: 20rpx;
				border-radius: 10rpx;
			}
		 }
		 .htwo{
			background-color: rgba(11,80,242,1);
			padding: 50rpx 60rpx;
			margin-top: 50rpx;
			border-radius: 0 0 20rpx 20rpx;
			.hitem{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 10rpx;
				.zname{
					color: #fff;
					font-weight: 400;
					font-size: 28rpx;
				}
			}
		 }
		 .maimg{
			width: 100%;
			height: 286px;
			border-radius: 5rpx;
			margin: 40rpx 0;
			background-color: #fff;
			padding: 20rpx;
		 }
		 .huan{
			display: flex;
			align-items: center;
			justify-content: center;
			text{
				color: #fff;
				font-weight: 400;
				font-size: 32rpx;

			}
		 }
	   }
	}
	.baocun{
		border-radius: 50rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(11,80,242,1);
		margin: 60rpx;
		color: #fff;
		font-size: 28rpx;

	}
</style>
